<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.slider-wrap{
				position: relative;
				width: 400px;
				height: 20px;
				background:#eee;
			}
			.slider-wrap2{
				
				width: 20px;
				height: 400px;
				
			}
			.slider-bar{
				position: absolute;
				width: 50px;
				height: 20px;
				background: #ccc;
			}
			.slider-bar2{
				
				width: 20px;
				height: 50px;
				background: #ccc;
			}
			
		</style>
	</head>
	<body>
		<div class="slider-wrap">
			<div class="slider-bar slider-bar1"></div>
		</div>
		
		<div class="slider-wrap slider-wrap2">
			<div class="slider-bar slider-bar2"></div>
		</div>
		<div class="slider-area"></div>
		<script type="text/javascript">
			window.onload=function(){
				var a = new Slider({el:document.querySelector('.slider-bar1'),dir:'x',max:350,min:0,val:20})
				var b = new Slider({el:document.querySelector('.slider-bar2'),dir:'y',max:350,min:0,val:100})
			}
			
			
			// new slider({el:'.slider-bar2',dir:'y',max:350,min:0,val:100})
			
				function Slider(params){
					// 获取参数
					this.el = params.el
					this.dir = params.dir?params.dir:'x'
					this.max = params.max?params.max:100
					this.min = params.min?params.min:0
					this.val = params.val?params.val:0
					this.el.style[this.dir==='x'?'left':'top']=this.val+'px',
					// 设置基点
					this.orgX=0;
					this.orgY=0;
					this.init()
					
				}
				Slider.prototype.init=function(){
					var _this = this;
					_this.el.addEventListener('mousedown',function(e){
						var e = e||window.event
						_this.orgX=e.clientX-_this.el.offsetLeft
						_this.orgY=e.clientY-_this.el.offsetTop
						e.preventDefault()
						document.onmousemove=function(e){
							_this.touchMove(e)
						}
						document.onmouseup=function(e){
							_this.touchEnd(e)
						}
						return false
					})
				}
				Slider.prototype.touchMove=function(e){
					var e = e||window.event
					// 判断方向
					if(this.dir==='x'){
						this.val=e.clientX-this.orgX
					}else if(this.dir==='y'){
						this.val=e.clientY-this.orgY
					}
					// 判断最大最小值  范围限定
					if(this.val<this.min){
						this.val=this.min
					}else if(this.val>this.max){
						this.val=this.max
					}
					
					this.el.style[this.dir==='x'?'left':'top']=this.val+'px'
				}
				Slider.prototype.touchEnd=function(e){
					document.onmousemove=document.onmouseup=null
				}
			
			
			
		</script>
	</body>
</html>
